<template>
<div class="box">
    <detail-banner
    :sightName="sightName"
    :bannerImg="bannerImg"
    :bannerImgs="gallaryImgs"
    ></detail-banner>
    <detail-header></detail-header>    
    <div class="content">
        <detail-list :list="list"></detail-list>
        <detail-int :introduceList="introduceList"></detail-int>
        <compo-nents :list="commentlist" :imgs="commentimgs" :imgs1="commentimgs1" :comshowImgs="comImgs"></compo-nents>        
    </div>
</div>    
</template>
<script>
import DetailBanner from "./components/Banner";
import DetailHeader from "./components/Header";
import DetailList from "./components/List";
import DetailInt from "./components/introduce";
import CompoNents from "./components/comment";
import axios from "axios";
export default {
  name: "Detail",
  components: {
    DetailBanner,
    DetailHeader,
    DetailList,
    DetailInt,   
    CompoNents
  },
  data() {
    return {
      sightName: "",
      bannerImg: "",
      gallaryImgs: [],
      list: [],
      introduceList:[],
      commentlist:[],
      commentimgs:[],
      commentimgs1:[],
      comImgs:[]
    };
  },
  methods: {
    getDdtailInfo() {
      axios
        .get("./static/mock/datail.json", {
          params: {
            id: this.$route.params.id
          }
        })
        .then(this.handleGetDataSucc);
    },
    handleGetDataSucc(res) {
      res = res.data;
      let id = this.$route.params.id;
      if (res.ret) {
        const data = res["data" + id];
        this.sightName = data.sightName;
        this.bannerImg = data.bannerImg;
        this.gallaryImgs = data.gallaryImgs;
        this.list = data.categoryList;
        this.introduceList=data.introduceList
        this.commentlist=data.commentlist
        this.commentimgs=data.commentimgs
        this.commentimgs1=data.commentimgs1
        this.comImgs=data.comImgs
       
       
      }
    }
  },
  mounted() {
    this.getDdtailInfo();
    // console.log(this.$route.params.id);
  }
};
</script>

<style lang="stylus" scoped>
.box {
    position: relative;
}
.content {
    height: auto;
    border: 1px solid white;
    border-radius: 10px;
    position: relative;
    top: -0.15rem;    
    background: white;
    box-shadow: -2px -10px 50px black;
}
</style>
